<template>
  <div class="box">
      <!-- 轮播 -->
    <lunbo class="lunbo"> </lunbo>
    <div class="shop-detail"> 
          <h4>超清爽柑也</h4>
          <p class="p">新品</p>
          <div class="desc">冷标准怀500ml;冷加大MAX杯650ml人气Top2多肉芒芒甘露肉芒芒甘露肉芒芒甘露肉芒芒甘露肉
            芒芒甘露肉芒芒甘露肉芒芒甘露肉芒芒甘露肉芒芒甘露肉芒芒甘露肉芒芒甘露肉芒芒甘露。</div>
           <div class="original">
              <p>原创<span>0糖0卡糖</span></p>
              <ul>
                <li>原创0糖0卡糖<span class="span">￥1.00</span></li>
              </ul>
          </div>  
          <div class="xicha">
              <p>绿色喜茶</p>
              <ul>
                <li>PLA可降解吸管(推荐)</li>
                <li>不适用吸管</li>
              </ul>
          </div> 
          <div class="icecount">
            <p>冰量</p>
            <ul>
              <li>正常(推荐)</li>
              <li>少冰</li>
              <li>少少冰</li>
              <li>去冰</li>
            </ul>
          </div>  
           <div class="status">
              <p>状态</p>
              <ul>
                <li>冰沙(推荐)</li>
                <li>非冰沙</li>
              </ul>
           </div> 
           <div class="souger"> 
              <p> 甜度</p>
              <ul>
                <li>标准甜(推荐)</li>
                <li>不另外加糖</li>
              </ul>
          </div> 
           <div class="addliao"> 
              <p>加料</p>
              <ul>
                <li>标准甜(推荐)</li>
                <li>不另外加糖</li>
                <li>不另外加糖</li>
                <li>不另外加糖</li>
              </ul>
          </div> 
    </div>
     <!-- 加入购物车 -->
     <div class="addcart"> 
       <div class="top">
             <div class="left">
                <div class="price">￥<span>28</span></div>
                <p>不另外加糖不另外加糖不另外加糖非冰沙非冰沙</p>
          </div>      
          <div class="right">
                <input type="button" value="+"><input type="text" size="1px" value="1"><input type="button" value="-">
          </div>
       </div>
          <button>加入购物车</button>
    </div>

  </div>
</template>

<script scoped>
import lunbo from "../../components/Menus/lunbo.vue";
export default {
  name: "Datail",
  components:{lunbo}
};
</script>

<style scoped>
@import url(../../assets/Menus/iconfont/iconfont.css);
.box {
  width: 375px;
  position: fixed;
  top: 0;
  z-index: 999;
  background-color: #fff;
}
.lunbo{position: fixed;top: 0;z-index: 999;}
.shop-detail{width: 375px ;background-color: rgb(230, 230, 218);height: 1000px;position: absolute;margin-top: 200px;overflow: auto;}
.shop-detail h4{font-size: 25px ;}
.shop-detail .p{background-color:#f1f1f1;width: 60px;height: 30px;border-radius: 15px;margin:10px 0;text-align: center;}
.shop-detail desc{font-size: 18px;}
ul{display: flex;margin: 20px 0;}
ul li{width: 160px ;height: 40px;line-height: 40px;background-color: #f7f7f7;text-align: center;border-radius: 5px;margin-right: 10px;}
.original{margin: 20px 0 10px;}
.original p{font-size: 25px;font-family: 楷体;color: #f6e1cc;}
.original p span{font-size: 25px;font-family: 楷体;color: #0e0c0a;margin-left: 15px;}
.span{color:#dfb88d;}
.addcart{position: fixed;bottom: 0;z-index: 999;background-color:#fefefe;width: 375px;height: 160px;}
.top{display: flex;justify-content: space-between;margin:30px 0;}
.top .left {width: 280px;}
.top .left .price{font-size: 20px;}
.top .left p{width: 100%;text-overflow: ellipsis;white-space: nowrap;overflow-x:hidden;font-size: 14px;}
.top .right{width: 77px;align-self: center;}
[type="button"]{border-radius: 50%;width: 20px;height: 20px;}
[type="text"]{border: none;text-align: center;}
button{width: 335px;height: 50px;
display: block;
line-height: 50px;margin: auto;color: white;
text-align: center;border-radius: 20px;
background-color: black;
font-size: 20px;}
</style>